<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>考核详情</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }

        .left-box {
            width: 100%;
            height: 300px;
            background-color: #FFFFFF;
        }

        .right-box {
            width: 100%;
            height: 300px;
            background-color: #fff;
        }

        .right-box li {
            padding: 10px 40px
        }

        .count-group {
            margin-left: 20px;
        }

        .count-group button {
            width: 30px;
            background-color: white;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        .count-group span {
            padding: 0 5px;
            border: 1px solid #ccc
        }

        .img-item-box {
            width: 100%;
            height: 90px;
            margin-top: 10px;
        }

        .praise {
            cursor: pointer;
            font-size: 20px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <!-- 头部开始 -->
    <div style="width: 100%; height: 60px; line-height: 60px; background: #333">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div style="color: #04bd4b; font-size: 20px;">企业员工绩效考核管理系统</div>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <span v-if="user.name" style="color: #eee;">
                        <span style="color: #04bd4b; margin-right: 20px">{{user.name}}</span>
                        <a style="color: #eee;" href="javascript:void(0)" @click="logout">退出</a>
                        <a style="color: #eee;" v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
                    </span>
                </div>
                <div class="col-md-2" style="text-align: right">
                    <a href="/end/page/login.html" target="_blank" style="color: #eee; margin-right: 10px">登录</a>
                    <a href="/end/page/register.html" target="_blank" style="color: #eee;">注册</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航开始 -->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%; height: 50px; line-height: 50px;">
            <div class="col-md-12" style="padding: 0">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a></li>
                        <li class="nav-item"><a href="advertiserInfo.html">公告信息</a></li>
			<li class="nav-item"><a href="messageInfo.html">在线留言</a></li>
			<li class="nav-item"><a href="submitInfo.html">评估考核</a></li>
			<li class="nav-item"><a href="richtextInfo.html">站内新闻</a></li>
<!--			<li class="nav-item"><a href="cartInfo.html">购物车信息</a></li>-->
<!--			<li class="nav-item"><a href="orderInfo.html">订单信息</a></li>-->
			<li class="nav-item"><a href="commentInfo.html">意见征集</a></li>

                        <li class="nav-item"><a href="javascript:void(0)" @click="personalPage">个人信息</a></li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 头部结束 -->
    <div class="container" style="margin-top: 20px">
        <div class="row">
            <div class="col-md-3">
                <div class="left-box">
                    <div style="width: 100%; height: 300px">
                        <img id="main-img-id" style="height: 100%; width: 100%" :src=mainSrc alt="">
                    </div>
<!--                    <ul class="img-item-box">-->
<!--                        <li v-for="id in fileIds" class="col-md-3">-->
<!--                            <img @mouseover="mouseOver(id)" style="width: 100%; height: 100%"-->
<!--                                 :src="'/files/download/' + id" alt="">-->
<!--                        </li>-->
<!--                    </ul>-->
                </div>
            </div>
            <div class="col-md-7">
                <div class="right-box">
                    <ul>
                        <li style="font-size: 40px;text-align: center;padding-top: 60px;">
                            <span class="right-title">{{goodsInfo.name}}</span>
                            <i class="fa fa-thumbs-o-up praise" @click="hotClick()"><span style="margin-left: 3px; font-size: 12px">{{goodsInfo.hot}}</span></i>
                        </li>
                        <li style="font-size: 20px;padding: 50px 130px;">具体描述：<span style="color: red; margin-left: 20px;">{{goodsInfo.description}}</span></li>
<!--                        <li>价格：<span style="color: red; margin-left: 20px;">￥ {{goodsInfo.price}}</span></li>-->
<!--                        <li>促销：<span style="color: red; margin-left: 20px;">{{goodsInfo.discount}}</span></li>-->
<!--                        <li>数量：-->
<!--                            <span class="count-group">-->
<!--                            <button @click="changeCount('-')">-</button><span id="count-id" style="margin: 0 5px">1</span><button-->
<!--                                    @click="changeCount('+')">+</button></span>-->
<!--                            <span style="margin-left: 10px; color: #666;">库存<span id="store-id">{{goodsInfo.count}}</span>件</span>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <button class="btn btn-info" @click="addCart()">加入购物车</button>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div style="background-color: white; min-height: 300px">
                <div style="width: 100%; height: 50px; background-color: #ddd; line-height: 50px; margin: 30px 0">
                    <span style="font-weight: bold; margin-left: 20px; font-size: 16px">意见征集（{{totalComment}}）</span>
                </div>
                <div id="comment-content">
                    <div v-for="item in comments" class="row">
                        <div class="col-md-1" style="text-align: right">{{item.userName}}</div>
                        <div class="col-md-10">
                            <div class="row" style="padding: 0 40px">
                                <div class="col-md-12" style="text-align: justify;">{{item.content}}</div>
                                <div class="col-md-12" style="text-align: right; margin-top: 10px">
                                    <span style="color: #888888">{{item.createTime}}</span>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/my.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            isCollect: false,
            goodsId: 0,
            mainSrc: '',
            fileIds: [],
            goodsInfo: {},
            comments: [],
            totalComment: 0,
            isShow: false,
            user: {}
        },

        created: function () {
            axios.get('/auth').then(res => {
                if (res.data.code === '0') {
                    this.user = res.data.data;
                    if (this.user.level !== 3) {
                        this.isShow = true;
                    }
                }
            });
            this.goodsId = this.getQueryVariable('goodsId');
            this.loadGoodsInfo();
            this.loadComments();
        },

        methods: {
            loadGoodsInfo() {
                axios.get("/goodsInfo/" + this.goodsId).then(res => {
                    if (res.data.code === '0') {
                        this.goodsInfo = res.data.data;
                        this.mainSrc = '/front/img/goods/default.png';
                        if (this.goodsInfo.fileIds) {
                            let fileIds = JSON.parse(this.goodsInfo.fileIds);
                            // 截取前4个展示
                            if (fileIds.length > 4) {
                                fileIds = fileIds.splice(0, 4);
                            }
                            this.fileIds = fileIds;

                            if (fileIds.length) {
                                this.mainSrc = '/files/download/' + fileIds[0];
                            }
                        }
                        let discount = this.goodsInfo.discount;
                        this.goodsInfo.discount = discount < 1 ? discount * 10 + " 折" : '-';
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            loadComments() {
                axios.get('/commentInfo/all/' + this.goodsId).then(res => {
                    if (res.data.code === '0') {
                        this.comments = res.data.data;
                        this.totalComment = this.comments.length;
                    } else {
                        alert(res.data.msg)
                    }
                })
            },
            getQueryVariable(variable) {
                let query = window.location.search.substring(1);//提取传递参数goodsId=4
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] === variable) {
                        return pair[1];
                    }
                }
                return '';
            },
            mouseOver(id) {
                $('#main-img-id').attr('src', '/files/download/' + id);
            },
            changeCount(type) {
                let $count = $('#count-id');
                let $store = $('#store-id');
                let count = parseInt($count.text());
                let store = parseInt($store.text());
                if(type==='+'&&count>=3){
                    $count.text(3);
                    alert("对不起,您一次最多只能购买3件")
                    return;
                }
                if (type === '+') {
                    count = count === store ? store : count + 1;
                } else {
                    count = count === 1 ? 1 : count - 1;
                }
                $count.text(count)
            },
            addCart() {
                let userId;
                if (!this.user.name) {
                    alert('请先登录');
                    return;
                } else {
                    userId = this.user.id;
                }

                let $count = $('#count-id');
                let count = parseInt($count.text());

                if (this.goodsId) {
                    let data = {userId: userId, level: this.user.level, goodsId: this.goodsId, count: count};
                    axios.post('/cartInfo', data).then(res => {
                        if (res.data.code === '0') {
                            alert('加入成功');
                        } else {
                            alert(res.data.msg)
                        }
                    })
                }
            },
            hotClick() {
                axios.put('/goodsInfo', {id: this.goodsId, hot: 1}).then(res => {
                    if (res.data.code === '0') {
                        alert('点赞+1');
                        this.loadGoodsInfo();
                    } else {
                        alert(res.data.msg)
                    }
                })
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
